<template>
<div>
	<img src="../../../static/image/login_bg.jpg" class="bodybg" alt="">
	<div class="login_box">
		<div class="login_main">
			<p class="login_head">创今世纪智能云客服系统</p>
			<!-- <p class="login_tit">大数据+AI 智能+CRM一体化服务专家</p> -->
			<div class="login_container">
				<h2>登&nbsp;&nbsp;录</h2>
			    <el-form :model="formName" :rules="rules2" ref="formName">
		            <el-form-item class="login_userinp" prop="username">
		                <el-input name="username" key="username" v-model="formName.username" placeholder="请输入账户名或者账号" auto-complete="on"></el-input>
		            </el-form-item>
		            <el-form-item class="login_passinp" prop="password">
		                <el-input  type="password" name="password" key="password" v-model="formName.password" placeholder="请输入密码" auto-complete="on"></el-input>
		            </el-form-item>

		            <el-form-item class="login_extinp">
		            	<el-select v-model='formName.phoneListShow' key="phoneList" default-first-option placeholder="分机号码">
					    	<el-option
					    	v-for="item in formName.phoneList"
					    	:key="item"
					    	:label="item"
					    	:value="item">
					    	</el-option>
					    </el-select>
		            </el-form-item>
		            <el-form-item class="login_sevinp mb5">
		               <el-select v-model="formName.serviceQueueShow"  key="serviceQueue" default-first-option placeholder="服务队列">
						    <el-option
						      v-for="item in formName.serviceQueue"
						      :key="item"
						      :label="item"
						      :value="item">
						    </el-option>
						  </el-select>
		            </el-form-item>
		            <p class="login_tips">*后台管理账号登录不用输入分机号码及服务队列</p>
		            <el-form-item>
		                <el-button type="primary" @click="loginBtn('formName')">登录</el-button>
		            </el-form-item>
		        </el-form>
				</div>
		</div>
	</div>
	</div>
</template>
<script>
import {
	login,
	getDictionaryValue,
	pbxUserQueueList,
	pbxUserPhoneList,
	pbxBindingPhone,
	equiLogin } from '@/api'
	export default {
      name: 'App',
      data(){
		const validateAccount = (rule, value, callback) => {
			let reg = /\w{4,20}/;
			if (value != '' && reg.test(value)) {
				callback()
			} else {
				callback(new Error('请正确输入账号'));
			}
		};
		const validatePassword = (rule, value, callback) => {
			// let reg = /[\w\d_]{6,16}/;
			let reg = /[\u4E00-\u9FA5A-Za-z0-9_]{6,16}/;
			if (value != '' && reg.test(value)) {
				callback()
			} else {
				callback(new Error('请正确输入密码'))
			}
		}
      	return{
			formName: {
				username: '',
				password: '',
				phoneList: [],
				serviceQueue:[],
				phoneListShow:[],
				serviceQueueShow:[],
			},
			rules2: {
				username: [{
					validator: validateAccount,
					trigger: 'change'
				}],
				password:[{
					validator: validatePassword,
					trigger: 'change'
				}]
			}
      	}
    },
    created () {
      	this.userQueueList();
		this.userPhoneList();
		this.formName.username = sessionStorage.getItem('account');
    },
	methods:{
		loginBtn (formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					let params = {
						account: this.formName.username,
						password: this.formName.password
					}
					this.loginEvent(params)
					let key='eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NDg2Nzg2NzEsInN1YiI6IntcInVzZXJpZFwiOlwiMTM4MTE3NjY2MjIxMVwiLFwidXNlcm5hbWVcIjpcIjEzODExNzY2NjIyMTFcIixcImdzZG1cIjpcIlwiLFwiZ3NtY1wiOlwiXCIsXCJ4enFoamJcIjpcIjJcIixcIm11dGlsc0xpc3RcIjpcIlwiLFwienhqZFwiOlwiMTE2LjQwMDAwMFwiLFwienh3ZFwiOlwiMzkuOTAwMDAwXCIsXCJyZXRDb2RlXCI6MCxcInh6cWhkbVwiOlwiMTEwMTAwMDAwMDAwXCIsXCJ4enFobWNcIjpcIuWMl-S6rOW4glwiLFwidXNlcnR5cGVcIjpcIlwifSIsImlzcyI6ImFkbWludXNlciIsImp0aSI6IjEzODExNzY2NjIyMTEiLCJpYXQiOjE1NDcyMDc0NDN9.AzN7hBVRLCdToV9U7jam4yLpkcUkCai1xJpJjz6I6P0'
					sessionStorage.setItem('equiLoginValue', key)
				} else {
					return false;
				}
			});
		},
		//登录
		loginEvent (params) {
			login(params).then(res => {
				let code = res.data.code
				if (code == 0) {//登录接口调用成功
					let userInfo = {
						userId: res.data.data.id,
						roleId: res.data.data.roleId,
						companyId: res.data.data.companyId,
            			xzqhdm: res.data.data.xzqhdm,
						name: res.data.data.name}
					if(res.data.data.roleId ==3){ //判断用户角色是否是超管
						sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
						sessionStorage.setItem('account', res.data.data.account)
						this.getDictionaryValue()
						let data = res.data.data;
						this.formName = data;
						this.$router.push({
							path: '/home'
						})
					}else if(res.data.data.roleId ==1 ||res.data.data.roleId ==2 ){ //坐席或坐席经理
						if (this.formName.phoneListShow !='' && this.formName.serviceQueueShow != ''){
							//判断队列号和分机号不为空,进行登录
							let userInfo = {
								userId: res.data.data.id,
								roleId: res.data.data.roleId,
								companyId: res.data.data.companyId,
                				xzqhdm: res.data.data.xzqhdm,
								name: res.data.data.name
							}
							sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
							sessionStorage.setItem('account', res.data.data.account)
							//pbx分机绑定
							let params = {
								name: res.data.data.name,
								staff: res.data.data.id,//客服工号res.data.data.id,客服账号this.formName.username
								device:this.formName.phoneListShow,
								queue:this.formName.serviceQueueShow
							}
							this.bindPhone(params);
						}else{
							this.$message({
								message: '分机号码和队列号不能为空'
							})
						}
					}else if(res.data.data.roleId ==4){//等待修改部分
						if (this.formName.phoneListShow !='' && this.formName.serviceQueueShow != ''){
							//判断队列号和分机号不为空,进行登录
							let userInfo = {
								userId: res.data.data.id,
								roleId: res.data.data.roleId,
								companyId: res.data.data.companyId,
                				xzqhdm: res.data.data.xzqhdm,
								name: res.data.data.name
							}
							sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
							sessionStorage.setItem('account', res.data.data.account)
							//pbx分机绑定
							let params = {
								name: res.data.data.name,
								staff: res.data.data.id,//客服工号res.data.data.id,客服账号this.formName.username
								device:this.formName.phoneListShow,
								queue:this.formName.serviceQueueShow
							}
							this.bindPhone(params);
						}else{
							this.$message({
								message: '分机号码和队列号不能为空'
							})
						}
					}
				} else if (code == 1) { //调用登录失败
					this.$message({
						message: res.data.msg
					})
				}
			})
		},
		//系统字典
		getDictionaryValue() {
			getDictionaryValue().then(res => {
				let code = res.data.code
				if(code == 0) {
					sessionStorage.setItem('dictionaryValue', JSON.stringify(res.data.data))
				} else if (code == 1) {
					this.$message({
						message: res.data.msg
					})
				}
			})
		},
		userPhoneList () {//调入分机号码接口
			pbxUserPhoneList ().then(res => {
				let code = res.data.code;
				if(code == 0){
					let data = res.data.device;
					this.formName.phoneList = data;
					sessionStorage.setItem('phoneAmount', JSON.stringify(data.length))//坐席个数
				}else if(code == 1){
					this.$message({
		              	message: '分机号码获取失败'
		            })
				}

			});
		},
		userQueueList () {//调入服务队列接口
			pbxUserQueueList ().then(res => {
				let code = res.data.code;
				if(code == 0){
					let data = res.data.data;
					this.formName.serviceQueue = data;
				}else if(code == 1){
					this.$message({
		              message: '服务队列获取失败'
		            })
				}
			});
		},
		bindPhone (params) {
			pbxBindingPhone (params).then(res => {
				let code = res.data.code;
				if(code == 0){ //将分机号码和队列号码存入session,方便后面去取值
					sessionStorage.setItem('device', this.formName.phoneListShow);
					//将分机号码存再session中sessionStorage.getItem('device')
					sessionStorage.setItem('queue',this.formName.serviceQueueShow);//将队列号码存再session中
					this.getDictionaryValue()
					let data = res.data.data;
					this.formName = data;
					this.$router.push({
						path: '/home'
					})
				}else if(code == 1){
					this.$message({
		              message: '分机号码错误！'
		            })
				}else if(code ==2){
					this.$message({
		              message: '队列号码错误！'
		            })
				}else if(code ==4){
					this.$message({
		              message: '加入失败！'
		            })
				}else if(code ==5){
					this.$message({
		              message: '姓名或工号错误'
		            })
				}
			});
		},
	}
};
</script>

<style scoped>
	.login_box{position:fixed;display:flex;align-items:center;justify-content:center;width:100%;height:100%; z-index:2}
	.bodybg{width:100%; height:100%; position:absolute; top:0; left:0; z-index:1;background:url("../../../static/image/login_bg.jpg") no-repeat;background-position:center center;background-size:cover;}
	.login_head{text-align:center;font-size:60px;line-height:70px;color:#ffffff;}
	.login_tit{text-align:center;font-size:24px;line-height:30px;color:#ffffff;}
	.login_container{width:415px;margin:20px auto 0;background:rgba(255,255,255,0.3);border-radius:5px;border:1px solid #fff;box-shadow:0px 0px 5px #666,0 0 2px #fafafa inset;}
	.login_container h2{text-align:center;font-size:24px;line-height:50px;color:#ffffff;}
	.login_container .el-form{margin-left:52px;}
	.login_tips{font-size:14px;color:#54678f;margin-bottom:10px;}
	.mb5{margin-bottom:5px;}
	.el-button{width:311px;background:#01d39a;border-color:#01d39a;}
	.el-button:focus, .el-button:hover{background:#02eaab;border-color:#02eaab;}
	.login_container .el-input,.login_container .el-select{width:311px;height:40px;border-radius:0;}

</style>
